
<template>
  <div>
    <ul class="ul-nav">
      <li class="li-first" v-for="(item,index) in listarr " :key="index">
        
          <router-link  tag="span" class="a-first" @mouseenter.native="A(index)" :class="{ liActive:index==current}" :to="{path:item.path}">{{item.name}}</router-link>
          
        
      </li>
    </ul>
  </div>
</template>
<script>
/**
 * 遇到的难点 在v-for 的情况下动态 vue增删class
 * 解决办法 给组件实例vue设一个固定属性 通过下标判断
 * :class="{ liActive:index==current}"
 * router-link 结合 v-for to 结合 参数路径
 */
export default {
  data() {
    return {
      current: 9,
      listarr: [
        { path:"center",name: "清华大学" },
        { path:"peoplesCongress",name: "北京大学" },
        { path:"CPPCC",name: "北京邮电大学" },
        { path:"supremeCount",name: "中国人民大学" },
        { path:"supremeProcuratorate",name: "北京理工大学" },
        { path:"stateCouncil",name: "北京科技大学" },
        { path:"enterprise",name: "北京航空航天大学" },
        { path:"peopleTeam",name: "中国传媒大学" },
        { path:"university",name: "中国政法大学 " },
        { path:"province",name: "对外经济贸易大学" },
      ],
    }
  },
  methods: {
    A(index) {
      this.current = index
    },
    B(a) {
      a.classList.remove("li-active")
    },
  },
}
</script>
<style lang="less" scoped>
a,
a:hover {
  text-decoration: none;
}
ul li {
  list-style: none;
}
.liActive {
  background-color: #5a0fa1 !important;
}
.ul-nav {
  width: 220px;
  .li-first {
    margin-bottom: 10px;
  }
  .a-first {
    display: block;
    color: #fff;
    font-size: 16px;
    background-color: #5fca44;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>